<template>
	<view>
		<view :style="'background-color:'+colorStore.color">setup pinia</view>
		<button size="mini" @click="colorStore.setColor('#fff')">白色</button> 
		<button size="mini" @click="colorStore.setColor('#36f')" type="primary">蓝色</button> 
		<button size="mini" @click="colorStore.color='#f36'" type="warn">橙色</button> 
		<view :style="'background-color:'+color">color</view>
		<button size="mini" @click="colorStore.setColor('#ff0')" type="warn">黄色</button> 
	</view>
</template>
<script setup>
	// 导入计算方法
	import {computed} from 'vue'
	// 导入颜色仓库
	import useColorStore from '@/stores/useColorStore.js'  
	// 创建颜色仓库
	const colorStore = useColorStore();
	// 这样写颜色color并不是响应式x
	// const {setColor,color} = colorStore	
	// 颜色简写计算
	const color = computed(()=>colorStore.color) //√
</script>